<template>
	<view>
		<!-- 顶部导航 -->
		<swiper-tab-head :tabBars="tabBars" :tabIndex="tabIndex" @tabtap="tabtap"></swiper-tab-head>

		<!-- 滑块容器 -->
		<view class="uni-tab-bar">
			<swiper class="swiper-box" :style="{ height: swiperheight + 'px' }" :current="tabIndex" @change="tabChang">
				<swiper-item v-for="(items, index) in newslist" :key="index">
					<scroll-view scroll-y class="list" @scrolltolower="loadmore(index)">
						
						
						<template v-if="items.list.length>0">
							<!-- 图文列表 -->
							<block v-for="(item, index1) in items.list" :key="index1">
								<index-list :item="item" :index="item.index"></index-list>
								
							</block>
							<!-- 上拉加载 -->
							<load-more :loadtext="items.loadtext"></load-more>
						</template>
						
						
						<template v-else>
							<!-- 无内容默认 -->
							
							<no-thing></no-thing>
							
						</template>
					
						
						
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
import indexList from '../../components/index/index-list/index-list.vue';
import swiperTabHead from '../../components/index/swiper-tab-head.vue';//横向滚动
import loadMore from '../../components/common/load-more.vue';//上拉加载
import noThing from '../../components/common/no-thing.vue'//无数据默认显示
export default {
	components: {
		indexList,
		swiperTabHead,
		loadMore,
		noThing
	},
	data() {
		return {
			swiperheight: 500,
			tabIndex: 0,
			tabBars: [
				{ name: '关注', id: 'guanzhu' },
				{ name: '推荐', id: 'tuijian' },
				{ name: '体育', id: 'tiyu' },
				{ name: '热点', id: 'redian' },
				{ name: '财经', id: 'caijing' },
				{ name: '娱乐', id: 'yule' },
				{ name: '电影', id: 'dianying' },
				{ name: '段子', id: 'duanzi' },
				{ name: '音乐', id: 'yinyue' }
			],
			newslist: [
				{
					loadtext:"上拉加载更多",
					list: [
						{
							userpic: '../../static/demo/userpic/11.jpg', //发帖人头像
							username: '昵称', //发帖人姓名
							isguanzhu: true, //是否关注
							title: '我是标题', //标题
							type: 'video', //img图片 video 视频
							titlepic: '../../static/demo/datapic/11.jpg', //标题图片
							playnum: '20w',
							long: '2:27',
							infonum: {
								index: 0, //0代表没有操作 1顶了 2 踩了
								dingnum: 11,
								cainum: 10
							},
							commentunm: 10, //评论
							sharnum: 10 //转发
						},
						{
							userpic: '../../static/demo/userpic/11.jpg', //发帖人头像
							username: '昵称1', //发帖人姓名
							isguanzhu: false, //是否关注
							title: '我是标题1', //标题
							type: 'video', //img图片 video 视频
							titlepic: '../../static/demo/datapic/10.jpg',
							playnum: '20w',
							long: '2:30',
							infonum: {
								index: '0', //0代表没有操作 1顶了 2 踩了
								dingnum: 11,
								cainum: 10
							},
							commentunm: 10,
							sharnum: 10
						}
					]
				},
				{
					loadtext:"上拉加载更多",
					list: [
						{
							userpic: '../../static/demo/userpic/1.jpg', //发帖人头像
							username: '昵称1', //发帖人姓名
							isguanzhu: false, //是否关注
							title: '我是标题1', //标题
							type: 'video', //img图片 video 视频
							titlepic: '../../static/demo/datapic/1.jpg',
							playnum: '2w',
							long: '2:30',
							infonum: {
								index: '0', //0代表没有操作 1顶了 2 踩了
								dingnum: 11,
								cainum: 10
							},
							commentunm: 10,
							sharnum: 10
						}
					]
				},
				{
					loadtext:"上拉加载更多",
					list: [
						{
							userpic: '../../static/demo/userpic/2.jpg', //发帖人头像
							username: '昵称1', //发帖人姓名
							isguanzhu: false, //是否关注
							title: '我是标题1', //标题
							type: 'video', //img图片 video 视频
							titlepic: '../../static/demo/datapic/2.jpg',
							playnum: '20w',
							long: '2:30',
							infonum: {
								index: '0', //0代表没有操作 1顶了 2 踩了
								dingnum: 11,
								cainum: 10
							},
							commentunm: 10,
							sharnum: 10
						}
					]
				},
				{
					loadtext:"上拉加载更多",
					list: [
						{
							userpic: '../../static/demo/userpic/3.jpg', //发帖人头像
							username: '昵称1', //发帖人姓名
							isguanzhu: false, //是否关注
							title: '我是标题1', //标题
							type: 'video', //img图片 video 视频
							titlepic: '../../static/demo/datapic/3.jpg',
							playnum: '20w',
							long: '2:30',
							infonum: {
								index: '0', //0代表没有操作 1顶了 2 踩了
								dingnum: 11,
								cainum: 10
							},
							commentunm: 10,
							sharnum: 10
						}
					]
				},
				{
					loadtext:"上拉加载更多",
					list: [
						{
							userpic: '../../static/demo/userpic/4.jpg', //发帖人头像
							username: '昵称1', //发帖人姓名
							isguanzhu: false, //是否关注
							title: '我是标题1', //标题
							type: 'video', //img图片 video 视频
							titlepic: '../../static/demo/datapic/4.jpg',
							playnum: '20w',
							long: '2:30',
							infonum: {
								index: '0', //0代表没有操作 1顶了 2 踩了
								dingnum: 11,
								cainum: 10
							},
							commentunm: 10,
							sharnum: 10
						}
					]
				},
				{
					loadtext:"上拉加载更多",
					list: []
				},
				{
					loadtext:"上拉加载更多",
					list: []
				},
				{
					loadtext:"上拉加载更多",
					list: []
				},
				{
					loadtext:"上拉加载更多",
					list: []
				}
			]
		};
	},
	onLoad() {
		uni.getSystemInfo({
			success: res => {
				// console.log(res.windowHeight);
				// 计算出窗口高度
				let height = res.windowHeight - uni.upx2px(100);
				this.swiperheight = height;
				// console.log(height)
			}
		});
	},
	// 监听搜索框点击事件
	onNavigationBarSearchInputClicked() {
		uni.navigateTo({
			url:'../search/search'
		})
	},
	// 监听原生标题导航按钮点击事件
	onNavigationBarButtonTap(e) {
		console.log(JSON.stringify(e.index));
		
			switch (e.index){
				case 1:
				// 打开发布页面
				uni.navigateTo({
					url:'../add-input/add-input'
				})
				break;
				
			}
		
	},
	methods: {
		// 上拉加载
		loadmore(index){
			// 修改状态
			if(this.newslist[index].loadtext != "上拉加载更多"){
				return;
			}
			// 获取数据
			this.newslist[index].loadtext = "加载中...";
			setTimeout(()=>{
				// 获取完成
				let obj = {
					userpic: '../../static/demo/userpic/8.jpg', //发帖人头像
					username: '昵称', //发帖人姓名
					isguanzhu: true, //是否关注
					title: '我是标题', //标题
					type: 'video', //img图片 video 视频
					titlepic: '../../static/demo/datapic/8.jpg', //标题图片
					playnum: '2w',
					long: '2:27',
					infonum: {
						index: 0, //0代表没有操作 1顶了 2 踩了
						dingnum: 20,
						cainum: 500
					},
					commentunm: 110, //评论
					sharnum: 30 //转发
				};
				this.newslist[index].list.push(obj)
				this.newslist[index].loadtext = "上拉加载更多";
			},1000)
			
			// this.newslist[index].loadtext = "没有更多数据了";
		},
		// 根据点击改变tabBar
		tabtap(index) {
			this.tabIndex = index;
		},
		// 根据视图滑块改变tabbar
		tabChang(e) {
			// console.log(JSON.stringify(e.detail));
			// console.log(this.tabIndex)
			this.tabIndex = e.detail.current;
		}
	}
};
</script>

<style>
	
</style>
